<template>
    <div>
        <!-- 
            visible	是否显示 Dialog，支持 .sync 修饰符	boolean
            before-close	关闭前的回调，会暂停 Dialog 的关闭	function(done)，done 用于关闭 Dialog
         -->
        <el-dialog :title="isAdd ? '添加菜单' : '编辑菜单'" :visible.sync="isShow" :before-close="cancel" center>
            <el-form :model="menuFrom" :rules="rules" ref="menuRef">
                <el-form-item label="菜单名称" prop="title">
                    <el-input autocomplete="off" v-model="menuFrom.title"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" prop="pid">
                    <el-select v-model="menuFrom.pid" placeholder="请选择" @change="changePid">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <el-option v-for="item in $store.getters['menu/getMenu']" :key="item.id" :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" disabled="true">
                    <el-radio v-model="menuFrom.type" disabled :label="1">目录</el-radio>
                    <el-radio v-model="menuFrom.type" disabled :label="2">菜单</el-radio>
                </el-form-item>
                <el-form-item label="菜单图标" prop="title" v-if="menuFrom.type == 1">
                    <el-select v-model="menuFrom.icon" placeholder="请选择">
                        <el-option v-for="item in iconlist" :key="item" :label="item" :value="item">
                            <i :class="item"></i>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单地址" v-else>
                    <el-select v-model="menuFrom.url" placeholder="请选择">
                        <el-option v-for="item in IndexRouter" :key="item.path" :label="item.meta.title" :value="item.path">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="menuFrom.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { menuAdd, menuInfo, menuEdit } from "../../request/api.js"
// 引入菜单地址 保持与路由一致
import { IndexRouter } from '../../router'
export default {
    props: ['isShow', 'isAdd'],
    data() {
        return {
            IndexRouter: IndexRouter,
            iconlist: [
                "el-icon-s-tools",
                "el-icon-setting",
                "el-icon-s-goods",
                "el-icon-goods",
            ],
            // 表单对象
            menuFrom: {
                pid: 0,
                title: '',
                icon: '',
                type: 1,
                url: '',
                status: '1'
            },
            options: [{
                value: '1',
                label: '系统管理'
            }, {
                value: '2',
                label: '商城管理'
            }],
            rules: {
                title: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
                pid: [
                    { required: true, message: '请选择上级菜单', trigger: 'change' }
                ],
            }
        }
    },
    methods: {
        // 封装一个修改pid事件 由上级菜单的值联动改变类型的默认值
        changePid() {
            this.menuFrom.type = this.menuFrom.pid == 0 ? 1 : 2
        },
        // 封装一个取消事件
        cancel() {
            // 子传父
            this.$emit('cancel', false)
            this.reset()
        },
        // 封装一个清空事件
        reset() {
            this.menuFrom = {
                pid: 0,
                title: '',
                icon: '',
                type: 1,
                url: '',
                status: '1'
            }
            // 清空验证
            // resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
            this.$refs.menuRef.resetFields()
        },
        //   获取一条数据回显
        lookup(id) {
            menuInfo({ id }).then(res => {
                console.log(res, '获取一条数据');
                this.menuFrom = res.list
                this.menuFrom.id = id
            })
        },

        // 表单添加事件
        add() {
            this.$refs.menuRef.validate((val) => {
                if (val) {
                    if (this.isAdd) {
                        // console.log(this.menuFrom)
                        // 调用添加接口
                        menuAdd(this.menuFrom)
                            .then(res => {
                                if (res.code == 200) {
                                    // 关闭弹框
                                    this.cancel()
                                    // 重新调用列表 触发行动
                                    this.$store.dispatch('menu/getMenuListAciton')
                                    this.$message.success(res.msg)
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    } else {
                        // 调用编辑接口
                        menuEdit(this.menuFrom).then(res => {
                            if (res.code == 200) {
                                // 关闭弹框
                                this.cancel()
                                // 重新调用列表 触发行动
                                // this.$store.dispatch('menu/getMenuListAciton')
                                this.$message.success(res.msg)
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }

                }
            })
        }
    },

}
</script>
<style scoped></style>